<template>
  <div>
    <Form 
      name="form" 
      ref="formRef" 
      :labelCol="{ span: 8 }" 
      :wrapperCol="{ span: 16 }" 
      :initialValues="form"
      @finish="formFinish">

      <!-- 常规信息区 -->
      <div class="w">
        <div class="title-area">
          <span>常规信息</span>
        </div>
        <div class="content-area">
          <Row>
            <Col :span="12">
              <FormItem name="itemNumber" label="项目编号">
                <Input style="width: 100%" disabled />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="itemCost" label="项目金额" :rules="formRules.itemCost">
                <Input placeholder="请输入项目金额" style="width: 100%" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12">
              <FormItem name="itemName" label="项目名称" :rules="formRules.itemName">
                <Input placeholder="请输入项目名称" style="width: 100%" />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="clientNature" label="委托单位性质" style="position: relative;" class="selectPositionForm">
                <Select placeholder="请选择委托单位性质" style="width: 100%" :getPopupContainer="getPopupContainer">
                  <Option v-for="type in refData.clientNatures" :key="type.value" :value="`${type.value}`" :label="type.label" />
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12">
              <FormItem name="client" label="委托单位">
                <Input placeholder="请输入委托单位" style="width: 100%" />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="itemType" label="项目类型" style="position: relative;" class="selectPositionForm">
                <Select placeholder="请选择项目类型" style="width: 100%" :getPopupContainer="getPopupContainer">
                  <Option v-for="type in refData.itemTypes" :key="type.value" :value="`${type.value}`" :label="type.label" />
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12">
              <FormItem name="itemDegree" label="项目密级" style="position: relative;" class="selectPositionForm">
                <Select placeholder="请选择项目密级" style="width: 100%" :getPopupContainer="getPopupContainer">
                  <Option v-for="type in refData.itemDegrees" :key="type.value" :value="`${type.value}`" :label="type.label" />
                </Select>
              </FormItem>
            </Col>
            <Col :span="12"></Col>
          </Row>
          <Row>
            <Col :span="24">
              <FormItem name="itemDescribe" label="项目描述" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
                <TextArea placeholder="请输入项目描述" style="width: 100%; height: 100px;" />
              </FormItem>
            </Col>
          </Row>
        </div>
      </div>
  
      <!-- 源应用信息区 -->
      <div class="w" style="margin-top: 5px;">
        <div class="title-area">
          <span>源应用信息</span>
        </div>
        <div class="content-area">
          <Row>
            <Col :span="12">
              <FormItem name="appName" label="应用名称">
                <Input placeholder="请输入应用名称" style="width: 100%" />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="appArchitecture" label="应用架构">
                <Input placeholder="请输入应用架构" style="width: 100%" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="24">
              <FormItem name="appSurvey" label="详细应用调研信息" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
                <TextArea placeholder="请输入详细应用调研信息" style="width: 100%; height: 100px;" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12">
              <FormItem name="dbType" label="源库类型" style="position: relative;" class="selectPositionForm">
                <Select placeholder="请选择源库类型" style="width: 100%" :getPopupContainer="getPopupContainer">
                  <Option v-for="type in refData.dbTypes" :key="type.value" :value="`${type.value}`" :label="type.label" />
                </Select>
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="dbRelease" label="源库版本">
                <Input placeholder="请输入源库版本" style="width: 100%" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="24">
              <FormItem name="dbSurvey" label="数据库调研信息" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
                <TextArea placeholder="请输入数据库调研信息" style="width: 100%; height: 100px;" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12">
              <FormItem name="appApusic" label="中间件">
                <Input placeholder="请输入中间件" style="width: 100%" />
              </FormItem>
            </Col>
            <Col :span="12"></Col>
          </Row>
          <Row>
            <Col :span="24">
              <FormItem name="dbLibraries" label="特性或技术" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }" style="position: relative;" class="selectPositionForm">
                <!-- <TextArea placeholder="请输入特性或技术" style="width: 100%; height: 100px;" /> -->
                <Select type="multiple" style="width:100%" :value="dbLibrariesValue"  @change="dbLibrariesOnChange" allowClear :getPopupContainer="getPopupContainer">
                  <Option v-for="item in refData.dbLibraries" :key="item.value" :value="item.value" :label="item.label" />
                </Select>
              </FormItem>
            </Col>
          </Row>
        </div>
      </div>
  
      <!-- 目标信息区 -->
      <div class="w" style="margin-top: 5px;">
        <div class="title-area">
          <span>目标信息</span>
        </div>
        <div class="content-area">
          <Row>
            <Col :span="12">
              <FormItem name="itemLeader" label="项目负责人" :rules="formRules.itemLeader">
                <Input placeholder="请输入项目负责人" style="width: 100%" />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="firmPeople" label="厂商参与人员">
                <Input placeholder="请输入厂商参与人员" style="width: 100%" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12">
              <FormItem name="itemLeaderPhone" label="项目负责人电话" :rules="formRules.itemLeaderPhone">
                <Input placeholder="请输入项目负责人电话" style="width: 100%" />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="firmPeoplePhone" label="厂商联系人电话">
                <Input placeholder="请输入厂商联系人电话" style="width: 100%" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12">
              <FormItem name="produceId" label="目标产品" style="position: relative;" class="selectPositionForm">
                <Cascader style="width: 100%" placeholder="请选择目标产品" :options="refData.firmsList" :getPopupContainer="getPopupContainer"/>
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="schedule" label="项目预期工期">
                <Input placeholder="请输入项目预期工期" style="width: 100%" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12">
              <FormItem name="solutionId" label="拟用解决方案" :rules="formRules.solutionId" style="position: relative;" class="selectPositionForm">
                <Select placeholder="请选择拟用解决方案" style="width: 100%" :getPopupContainer="getPopupContainer">
                  <Option v-for="type in refData.solutionsList" :key="type.solutionId" :value="`${type.solutionId}`" :label="type.solutionName" />
                </Select>
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="resultSurvey" label="项目结果描述">
                <Input placeholder="请输入项目结果描述" style="width: 100%" />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="12">
              <FormItem name="itemReportFile" label="项目报告">
                <Input placeholder="请输入项目报告" style="width: 100%" />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem name="finishTime" label="项目完成时间" style="position: relative;" class="selectPositionForm">
                <DatePicker placeholder="请选择项目完成时间" mode="date" style="width: 100%" :getPopupContainer="getPopupContainer"/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col :span="24">
              <FormItem name="remark" label="其他情况说明" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
                <TextArea placeholder="请输入其他情况说明" style="width: 100%; height: 100px;" />
              </FormItem>
            </Col>
          </Row>
          <Row style="margin-top: 120px;">
            <Col :offset="2">
              <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
                <Button style="width: 100px;" type="primary" @click="formValidate">提 交</Button>
                <Button style="width: 100px; margin-left: 20px;" @click="formCancel">取 消</Button>
              </FormItem>
            </Col>
          </Row>
        </div>
      </div>
    </Form>

    <!-- 提交确认框 -->
    <Modal title="提交确认" v-model="isModalVisible" @ok="formSubmit" @cancel="isModalVisible = false" centered>
      <p>即将提交项目登记信息，是否确认？</p>
    </Modal>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import * as ruoyi from '@/utils/ruoyi'
import { Message } from '@uni/vue';
import { addItem, updateItem } from "@/api/doitem/item";

export default {
  name: "app",
  props: {
    itemId: {
      type: Number,
      default: 0
    },
    currRow: {
      type: Object,
      default: () => {}
    },
    refData: {
      type: Object,
      default: () => {}
    }
  },
  data: function () {
    const validateSolutionType = (rule, value) => {
      let type = this.refData.solutionsList.find(type => type.solutionId == value);
      if (type) return Promise.resolve();
      else return Promise.reject("请选择拟用解决方案");
    };
    return {
      dbLibrariesValue: this.currRow.dbLibraries ? this.currRow.dbLibraries.split(',') : [],
      form: {
        ...this.refData.itemDetail,

        // 常规信息
        itemNumber: this.itemId ? this.refData.itemDetail.itemNumber : `I${this.getCurrentTime()}`,
        itemCost: this.refData.itemDetail.itemCost ? `${this.refData.itemDetail.itemCost}` : '0',
        itemName: this.refData.itemDetail.itemName ? `${this.refData.itemDetail.itemName}` : '',
        clientNature: `${!isNaN(this.refData.itemDetail.clientNature) ? this.refData.itemDetail.clientNature : ''}`,
        client: this.refData.itemDetail.client ? `${this.refData.itemDetail.client}` : '',
        itemType: `${this.refData.itemDetail.itemType ? this.refData.itemDetail.itemType : ''}`,
        itemDegree: `${!isNaN(this.refData.itemDetail.itemDegree) ? this.refData.itemDetail.itemDegree : ''}`,
        itemDescribe: this.refData.itemDetail.itemDescribe? `${this.refData.itemDetail.itemDescribe}`: '',

        // 源应用信息
        appName: this.refData.itemDetail.appName ? `${this.refData.itemDetail.appName}` : '',
        appArchitecture: this.refData.itemDetail.appArchitecture ? `${this.refData.itemDetail.appArchitecture}` : '',
        appSurvey: this.refData.itemDetail.appSurvey? `${this.refData.itemDetail.appSurvey}`: '',
        dbType: `${!isNaN(this.refData.itemDetail.dbType) ? this.refData.itemDetail.dbType : ''}`,
        dbRelease: this.refData.itemDetail.dbRelease ? `${this.refData.itemDetail.dbRelease}` : '',
        dbSurvey: this.refData.itemDetail.dbSurvey? `${this.refData.itemDetail.dbSurvey}`: '',
        appApusic: this.refData.itemDetail.appApusic ? `${this.refData.itemDetail.appApusic}` : '',
        dbLibraries: this.currRow.dbLibraries ? this.currRow.dbLibraries.split(',') : [],

        // 目标信息
        itemLeader: this.refData.itemDetail.itemLeader ? `${this.refData.itemDetail.itemLeader}` : '',
        firmPeople: this.refData.itemDetail.firmPeople ? `${this.refData.itemDetail.firmPeople}` : '',
        itemLeaderPhone: this.refData.itemDetail.itemLeaderPhone ? `${this.refData.itemDetail.itemLeaderPhone}` : '',
        firmPeoplePhone: this.refData.itemDetail.firmPeoplePhone ? `${this.refData.itemDetail.firmPeoplePhone}` : '',
        produceId: this.currRow.produceId ? [
          this.refData.producesList.find(produce => produce.produceId == this.currRow.produceId).firmId,
          this.currRow.produceId
        ] : [],
        schedule: this.refData.itemDetail.schedule ? `${this.refData.itemDetail.schedule}` : '',
        solutionId: `${this.refData.itemDetail.solutionId ? this.refData.itemDetail.solutionId : ''}`,
        resultSurvey: this.refData.itemDetail.resultSurvey? `${this.refData.itemDetail.resultSurvey}`: '',
        itemReportFile: this.refData.itemDetail.itemReportFile ? `${this.refData.itemDetail.itemReportFile}` : '',
        finishTime: this.refData.itemDetail.finishTime ? dayjs(this.refData.itemDetail.finishTime) : undefined,
        remark: this.refData.itemDetail.remark? `${this.refData.itemDetail.remark}`: '',
      },
      formRules: {
        itemCost: [
          { required: true, message: '请输入项目金额' },
        ],
        itemName: [
          { required: true, message: '请输入项目名称' },
        ],
        itemLeader: [
          { required: true, message: '请输入项目负责人' },
        ],
        itemLeaderPhone: [
          { required: true, message: '请输入项目负责人电话' },
        ],
        solutionId: [
          // { required: true, message: '请输入拟用解决方案' },
          { required: true, validator: validateSolutionType },
        ]
      },
      isModalVisible: false
    }
  },
  mounted: function () {
    // console.log("mounted itemId: ", this.itemId);
    // console.log("mounted currRow: ", this.currRow);
    // console.log("mounted refData: ", this.refData);
  },
  methods: {
    getPopupContainer() {
      return document.querySelector(".selectPositionForm")
    },
    dbLibrariesOnChange: function (val) {
      this.dbLibrariesValue = val;
      // console.log("this.platformValue: ", this.platformValue.join(','));
      // console.log("val: ", val);
    },
    formValidate: function () {
      this.$refs.formRef.submit();
    },
    formCancel: function () {
      // this.$refs.formRef.reset();
      this.handleCancel();
    },
    formFinish: function (formValues) {
      this.form = formValues;
      // this.isModalVisible = true;
      this.formSubmit();
    },
    formSubmit: async function () {
      // 公共属性
      this.form.createBy = this.$store.state.user.name;
      this.form.createTime = ruoyi.parseTime(Date.now());
      this.form.updateBy = this.$store.state.user.name;
      this.form.updateTime = ruoyi.parseTime(Date.now());

      // 业务属性
      let reqForm = JSON.parse(JSON.stringify(this.form));
      reqForm.produceId = this.form.produceId[1] ? this.form.produceId[1] : '';
      reqForm.dbLibraries = this.dbLibrariesValue.join(',');
      reqForm.finishTime = this.form.finishTime ? this.form.finishTime.format('YYYY-MM-DD')  : '';

      // console.log("this.form: ", this.form);
      if (!this.form.clientNature || this.form.clientNature == 'undefined') reqForm.clientNature = '-1';
      if (!this.form.itemType || this.form.itemType == 'undefined') reqForm.itemType = '0';
      if (!this.form.itemDegree || this.form.itemDegree == 'undefined') reqForm.itemDegree = '-1';
      if (!this.form.dbType || this.form.dbType == 'undefined') reqForm.dbType = '0';

      // 提交表单请求
      this.isModalVisible = false;
      // console.log("reqForm: ", reqForm);

      if (this.itemId) {
        // 修改
        this.form.itemId = this.itemId;
        const rs = await updateItem(reqForm);
        if (rs.code !== 200) return Message.error({ text: '修改项目登记信息失败：' + rs.msg });
        Message.success({ text: '修改项目登记信息完成' });
        this.handleCancel();

      } else {
        // 新增
        const rs = await addItem(reqForm);
        if (rs.code !== 200) return Message.error({ text: '新增项目登记信息失败：' + rs.msg });
        Message.success({ text: '新增项目登记信息完成' });
        this.handleCancel();
      }
    },
    handleCancel: function () {
      this.$emit('handleCancel');
    }
  }
}
</script>

<style>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    padding-top: 15px;
    margin-left: 0px;
    margin-right: 50px;
    padding-bottom: 15px;
  }
</style>
